﻿CmnSplitter = function () {
    this.leftPanel = {
        initWidth: 250,
        maxWidth: 600,
        minWidth: 200
    };

    this.rightPanel = {
        initWidth: 800,
        maxWidth: 900,
        minWidth: 500
    };

    this.topPanel = {
        initHeight: 100,
        maxHeight: 150,
        minHeight: 100
    }

    this.barActiveColor = "#0080ff";

    this.divID = "";

    this.leftPanelID = "";

    this.rightPanelID = "";

    this.topPanelID = "";

    this.height = "";

    this.width = "";

    this.hasTopPanel = false;

    this.alignBarWidth = 4;

    this.valignBarHeight = 4;

    this.UseAlignBar = false;

    this.UseValignBar = false;
}

CmnSplitter.prototype = {
    init: function (divID, leftPanelID, rightPanelID, topPanelID) {
        this.divID = divID;

        this.leftPanelID = leftPanelID;

        this.rightPanelID = rightPanelID;

        this.topPanelID = topPanelID;
    },

    create: function () {
        var strHTML = "";


        if (!this.hasTopPanel) {
            this.topPanel.initHeight = 0;
            this.valignBarHeight = 0;
        }


        strHTML += "<div id=\"CmnSplitterDiv_" + this.divID + "\" class=\"mySplitter\">";
        if (this.hasTopPanel) {
            strHTML += "<div id=\"CmnSplitterTopPanel_" + this.divID + "\" class=\"topPanel\"></div>";
            strHTML += "<div id=\"CmnSplitterValignBar_" + this.divID + "\" class=\"valignSplitbar\"></div>";
        }
        strHTML += "<div id=\"CmnSplitterLeftPanel_" + this.divID + "\" class=\"leftPanel\"></div>";
        strHTML += "<div id=\"CmnSplitterAlignBar_" + this.divID + "\" class=\"alignSplitbar\"></div>";
        strHTML += "<div id=\"CmnSplitterRightPanel_" + this.divID + "\" class=\"rightPanel\"></div>";
        strHTML += "</div>";

        $j("#" + this.divID).append(strHTML);


        if (!MainScript.isNullOrEmpty(this.leftPanelID)) { this.appendLeftPanel(this.leftPanelID); }
        if (!MainScript.isNullOrEmpty(this.rightPanelID)) { this.appendRightPanel(this.rightPanelID); }

        if (this.hasTopPanel) {
            if (!MainScript.isNullOrEmpty(this.rightPanelID)) { this.appendTopPanel(this.topPanelID); }
        }

        var splitterIns = this;

        $j("#CmnSplitterDiv_" + this.divID).css("height", this.height + "px");
        $j("#CmnSplitterAlignBar_" + this.divID).css("height", this.height - this.topPanel.initHeight - this.valignBarHeight + "px");
        $j("#CmnSplitterAlignBar_" + this.divID).css("top", this.topPanel.initHeight + this.valignBarHeight + "px");
        $j("#CmnSplitterAlignBar_" + this.divID).css("left", this.leftPanel.initWidth + "px");
        $j("#CmnSplitterLeftPanel_" + this.divID).css("height", this.height - this.topPanel.initHeight - this.valignBarHeight + "px");
        $j("#CmnSplitterLeftPanel_" + this.divID).css("width", this.leftPanel.initWidth + "px");
        $j("#CmnSplitterLeftPanel_" + this.divID).css("top", this.topPanel.initHeight + this.valignBarHeight + "px");
        $j("#CmnSplitterRightPanel_" + this.divID).css("height", this.height - this.topPanel.initHeight - this.valignBarHeight + "px");
        $j("#CmnSplitterRightPanel_" + this.divID).css("left", this.leftPanel.initWidth + this.alignBarWidth + "px");
        $j("#CmnSplitterRightPanel_" + this.divID).css("top", this.topPanel.initHeight + this.valignBarHeight + "px");

        if (this.hasTopPanel) {
            $j("#CmnSplitterTopPanel_" + this.divID).css("height", this.topPanel.initHeight + "px");
            $j("#CmnSplitterValignBar_" + this.divID).css("top", this.topPanel.initHeight + "px");
        }

        this.width = parseInt($j("#CmnSplitterDiv_" + this.divID).css("width"), 10);

        if (!MainScript.isNullOrEmpty(this.rightPanelID)) { $(this.rightPanelID).style.width = this.width - this.leftPanel.initWidth - this.alignBarWidth + "px"; }

        if (this.UseAlignBar) {
            Event.observe($("CmnSplitterAlignBar_" + this.divID), 'mousedown', function (event) { splitterIns.alignBarMove(splitterIns.divID, event); });
        }

        if (this.hasTopPanel && this.UseValignBar) {
            Event.observe($("CmnSplitterValignBar_" + this.divID), 'mousedown', function (event) { splitterIns.valignBarMove(splitterIns.divID, event); });
        }
    },

    appendLeftPanel: function (leftPanelID) {
        this.leftPanelID = leftPanelID;

        $j("#CmnSplitterLeftPanel_" + this.divID).append($j("#" + this.leftPanelID));
    },

    appendRightPanel: function (rightPanelID) {
        this.rightPanelID = rightPanelID;

        $j("#CmnSplitterRightPanel_" + this.divID).append($j("#" + this.rightPanelID));
    },

    appendTopPanel: function (topPanelID) {
        this.topPanelID = topPanelID;

        $j("#CmnSplitterTopPanel_" + this.divID).append($j("#" + this.topPanelID));
    },

    alignBarMove: function (id, event) {
        var barObj = $("CmnSplitterAlignBar_" + id);

        var left = $j("#CmnSplitterAlignBar_" + id).css("left");

        var rightPanelLeft = $j("#CmnSplitterRightPanel_" + id).css("left");
        var leftPanelWidth = $j("#CmnSplitterLeftPanel_" + id).css("width");

        var x = parseInt(left, 10);

        var mouseLeft = event.x;

        maxLeft = this.leftPanel.maxWidth;
        minLeft = this.leftPanel.minWidth;

        Event.observe(document, 'mousemove', MouseMoveHandler);
        Event.observe(document, 'mouseup', MouseUpHandler);
        Event.observe(document, "selectstart", SelectStartHandler);

        Event.stop(event);

        var alignBarWidth = this.alignBarWidth;

        function MouseMoveHandler(event) {
            var moveLeft = event.x - mouseLeft + x;

            if (moveLeft >= minLeft) {
                if (moveLeft > maxLeft) {
                    barObj.style.left = maxLeft + "px";
                }
                else {
                    barObj.style.left = moveLeft + "px";
                }
            }
            else {
                barObj.style.left = minLeft + "px";
            }

            var divWidth = parseInt($j("#CmnSplitterDiv_" + id).css("width"), 10);
            $j("#CmnSplitterLeftPanel_" + id).css("width", barObj.style.left);
            $j("#CmnSplitterRightPanel_" + id).css("width", divWidth - parseInt(barObj.style.left, 10) - alignBarWidth + "px");
            $j("#CmnSplitterRightPanel_" + id).css("left", parseInt(barObj.style.left, 10) + alignBarWidth + "px");


            SelectStartHandler();
            Event.stop(event);
        }

        function MouseUpHandler(event) {
            Event.stopObserving(document, 'mousemove', MouseMoveHandler);
            Event.stopObserving(document, 'mouseup', MouseUpHandler);
            Event.stopObserving(document, "selectstart", SelectStartHandler);
            Event.stop(event);
        }

        function SelectStartHandler(e) {
            return false;
        }
    },

    valignBarMove: function (id, event) {
        var barObj = $("CmnSplitterValignBar_" + id);

        var top = $j("#CmnSplitterValignBar_" + id).css("top");

        var y = parseInt(top, 10);

        var mouseTop = event.y;

        maxTop = this.topPanel.maxHeight;
        minTop = this.topPanel.minHeight;

        Event.observe(document, 'mousemove', MouseMoveHandler);
        Event.observe(document, 'mouseup', MouseUpHandler);
        Event.observe(document, "selectstart", SelectStartHandler);

        Event.stop(event);

        var valignBarHeight = this.valignBarHeight;

        function MouseMoveHandler(event) {
            var moveTop = event.y - mouseTop + y;

            if (moveTop >= minTop) {
                if (moveTop > maxTop) {
                    barObj.style.top = maxTop + "px";
                }
                else {
                    barObj.style.top = moveTop + "px";
                }
            }
            else {
                barObj.style.top = minTop + "px";
            }

            var divHeight = parseInt($j("#CmnSplitterDiv_" + id).css("height"), 10);
            $j("#CmnSplitterTopPanel_" + id).css("height", barObj.style.top);

            $j("#CmnSplitterLeftPanel_" + id).css("height", divHeight - parseInt(barObj.style.top, 10) - valignBarHeight + "px");
            $j("#CmnSplitterLeftPanel_" + id).css("top", parseInt(barObj.style.top, 10) + valignBarHeight + "px");


            $j("#CmnSplitterRightPanel_" + id).css("height", divHeight - parseInt(barObj.style.top, 10) - valignBarHeight + "px");
            $j("#CmnSplitterRightPanel_" + id).css("top", parseInt(barObj.style.top, 10) + valignBarHeight + "px");

            $j("#CmnSplitterAlignBar_" + id).css("height", divHeight - parseInt(barObj.style.top, 10) - valignBarHeight + "px");
            $j("#CmnSplitterAlignBar_" + id).css("top", parseInt(barObj.style.top, 10) + valignBarHeight + "px");

            SelectStartHandler();
            Event.stop(event);
        }

        function MouseUpHandler(event) {
            Event.stopObserving(document, 'mousemove', MouseMoveHandler);
            Event.stopObserving(document, 'mouseup', MouseUpHandler);
            Event.stopObserving(document, "selectstart", SelectStartHandler);
            Event.stop(event);
        }

        function SelectStartHandler(e) {
            return false;
        }
    }
}